<template>
	<div class="share-page">
		<el-breadcrumb separator=">">
			<el-breadcrumb-item>策路管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/warning_strategy' }">报警策略管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/warning_strategy_edit' }">编辑报警策略</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="replenish-page">
			<div class="head">
				<el-form :inline="true" :model="formInline" class="demo-form-inline" required>
					<el-form-item label="策略名称">
						<el-input v-model="formInline.user" placeholder="请输入策略名称" clearable />
					</el-form-item>
					<el-form-item label="接收人">
						<el-select style="width:200px" v-model="formInline.region" placeholder="接收人" clearable>
							<el-option label="Zone one" value="shanghai" />
							<el-option label="Zone two" value="beijing" />
						</el-select>
					</el-form-item>
					<el-form-item label="报警时间" required>
						<el-time-picker style="width:450px" v-model="formInline.date" is-range range-separator="-"
							start-placeholder="请选择开始报警时间" end-placeholder="请选择开始报警时间" />
						<div class="item_tips">此时间区间内,故障才会发送微信模板消息通知;否则只会创建故障不会发送通知。</div>
					</el-form-item>
					<el-form-item>
						<div class="remarks">
							<div>报警方式将通过微信公众号下发,接收人必须关注公众号并登录绑定个人微信号</div>
							<img src="/src/assets/home/finance2.png" alt="">
						</div>
					</el-form-item>
				</el-form>
			</div>
			<div class="box">
				<div class="item" v-for="(item,index) in itemList" :key="index">
					<div class="item-top">
						<div class="top-left">
							<img src="/src/assets/strategy/ability.png" alt="" />
							<div class="copy">{{item.title}}</div>
						</div>
						<div class="top-right">
							<el-switch size="large" v-model="value3" inline-prompt active-text="是" inactive-text="否" />
						</div>
					</div>
					<div class="item-tips">{{item.tips}}</div>
					<div class="item-info">
						<div class="info-text-top" v-if="item.type !='input'">
							{{item.warningValue}} &nbsp;
						</div>
						<div v-else>
							<div class="info-text-top">
								<span class="mr10">连续</span>
								<el-input style="width:100px" v-model="item.warningValue" placeholder="请输入" clearable />
								<span class="ml10">分钟</span>
							</div>
							<div class="info-text-top">
								<span class="mr10">连续</span>
								<el-input style="width:100px" v-model="item.warningValue1" placeholder="请输入"
									clearable />
								<span class="ml10">分钟</span>
							</div>
						</div>
						<div class="info-text">
							{{item.remind}}
						</div>
					</div>
				</div>
			</div>
			<div class="edit-btn">
				<el-button size="small" round color="#0071bb">确定</el-button>
				<el-button size="small" round @click="$router.push('/warning_strategy')">返回</el-button>
			</div>
			<div class="page_number">
				<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size" layout="prev, pager, next, jumper,total" :total="1"
					@size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, reactive } from "vue";
	import type { ComponentSize } from 'element-plus'
	interface searchList {
		name : string;
		index : string;
		placeholder : string;
		type : string;
		ivalue : string;
	}
	const formInline = reactive({
		user: '',
		region: '',
		date: '',
	})
	const currentPage = ref(1);
	const pageSize = ref(1);
	const size = ref<ComponentSize>('small')
	const value3 = ref(false)


	const searchList = ref<searchList[]>([
		{
			name: '区域',
			index: '1',
			placeholder: '请选择',
			type: '1',
			ivalue: ''
		},
		{
			name: '场景',
			index: '2',
			placeholder: '请选择场景',
			type: '1',
			ivalue: ''
		},
		{
			name: '设备',
			index: '3',
			placeholder: '设备名称或编号',
			type: '2',
			ivalue: ''
		},
		{
			name: '线路',
			index: '4',
			placeholder: '请选择线路',
			type: '1',
			ivalue: ''
		}
	])
	const itemList = ref<{}[]>([
		{
			title: '设备离线',
			tips: '设备离线时推送给报警接收人',
			warningValue: '设备离线超过500秒',
			type: '',
			remind: '提醒:系统默认每15分钟做一次检测',
		}, {
			title: '温度报警',
			tips: '温度连续一段时间超出定义的温度',
			warningValue: '20',
			warningValue1: '0',
			type: 'input',
			remind: '提醒:设备自身需有温度感应器才生效',
		}, {
			title: '温度感应器模块失灵预警',
			tips: '当无人柜获取不了温度时报警',
			warningValue: '',
			type: '',
			remind: '提醒:无温度感应器的设备,无预警功能',
		}, {
			title: '订单异常通知',
			tips: '设备网络出现波动,等待出货状态超过30秒时,推送给报警接收人',
			warningValue: '',
			type: '',
			remind: '提醒:系统默认每15分钟做一次检测设备网络出现波动,会影响设备售卖',
		}, {
			title: '设备缺货通知',
			tips: '设备商品铺货量低于设定预警值,推送给报警接收人',
			warningValue: '设备离线超过500秒',
			type: '',
			remind: '提醒:设备需提前设置商品铺货量预警值',
		},

	])
	const handleSizeChange = (val : number) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val : number) => {
		console.log(`current page: ${val}`)
	}
</script>
<style lang="scss" scoped>
	.edit-btn {
		text-align: center;
	}

	.page_number {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px 0;
	}

	.remarks {
		font-size: 14px;
		display: flex;

		img {
			width: 30px;
			height: 30px;
		}
	}

	.item_tips {
		position: absolute;
		top: 30px;
		font-size: 12px;
	}

	.tips-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 20px;

		.tips {
			font-size: 12px;
			font-weight: bold;
			color: #5151ff
		}
	}

	.custom-transfer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.transfer-list {
		flex: 1;
		padding: 15px;
		height: 45vh;
		border: 1px solid #ccc;
		border-radius: 4px;

		.all-box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.all-check {
				display: flex;
				align-items: center;
			}

			.all-num {
				font-size: 14px;
			}
		}

		.choice-list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-top: 10px;

			.choice-item {
				width: 49%;
				display: flex;
				align-items: center;
				margin-bottom: 15px;

				.el-select {
					width: 160px;
				}

				.choice-title {
					font-size: 12px;
					width: 50px;
				}
			}

			.choice-box {
				width: 100%;
				display: flex;
				justify-content: right;

				.choice-btn {
					display: flex;
					justify-content: left;
				}
			}
		}

		.thing {
			margin-top: 20px;
		}
	}

	.transfer-list h2 {
		margin-bottom: 10px;
	}

	.transfer-list input[type="text"] {
		width: 100%;
		margin-bottom: 10px;
	}

	.transfer-list ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}

	.transfer-list li {
		margin-bottom: 5px;
	}

	.transfer-actions {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 0 20px;
	}

	.transfer-actions button {
		margin-bottom: 10px;
		background-color: #ffffff;
		border: 1px solid #ececec;
		padding: 5px 10px;
	}

	.replenish-page {
		padding: 20px;
		background-color: #ffffff;
		margin-top: 20px;

		.head {
			display: flex;

			.btn {
				margin-left: 10px;
			}
		}

		.box {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20px;

			.item {
				width: 350px;
				background-color: #f1f1f1;
				border-radius: 10px;
				margin-right: 20px;
				margin-bottom: 20px;

				.item-top {
					font-size: 14px;
					font-weight: bold;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background-color: #0071bb;
					height: 45px;
					padding: 0 10px;
					border-radius: 10px 10px 0 0;

					.top-left {
						display: flex;
						align-items: center;
						color: #fff;

						img {
							width: 30px;
							height: 30px;
						}

						.copy {
							margin-left: 10px;
						}
					}

					.top-right {
						display: flex;
						// margin-right: 30px;

						.right-text {
							color: #2282c2;
							margin-right: 10px;
							cursor: pointer;
						}
					}
				}

				.item-tips {
					height: 30px;
					line-height: 30px;
					background-color: #29aae1;
					color: #fff;
					text-align: center;
					margin-top: 20px;
					font-size: 12px;
				}

				.item-info {
					font-size: 12px;
					color: #999;
					padding: 10px;
					text-align: center;
					padding-bottom: 20px;
					height: 140px;

					.info-text-top {
						margin-top: 10px;
						color: #000;

						.ml10 {
							margin-left: 10px;
						}

						.mr10 {
							margin-right: 10px;
						}
					}

					.info-text {
						margin-top: 10px;
					}
				}

				.item-btn {
					margin-top: 30px;
				}
			}
		}

		.title {
			font-size: 18px;
			font-weight: bold;
			padding: 0 20px 10px;
			margin-top: -20px;
		}

		.transfer {
			margin: 0 auto;
			padding: 20px 0;
		}
	}
</style>